<template>
  <div>
    <Tabs value="shouru" name="secondBox">
      <TabPane label="收入" name="shouru" tab="secondBox">
        <Row>
          <Form
            ref="searchForm"
            :model="shouruSearchForm"
            inline
            :label-width="70"
            class="search-form"
          >
            <Form-item label="支出类型" prop="start">
              <Select
                v-model="shouruSearchForm.start"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option value="MEETING">充值会员</Option>
                <Option value="OFFLINE">线下订单</Option>
                <Option value="NORMAL">线上订单</Option>
                <Option value="VIRTUAL">虚拟订单</Option>
              </Select>
            </Form-item>
            <Form-item label="下单时间">
              <DatePicker
                v-model="selectDate"
                type="datetimerange"
                format="yyyy-MM-dd"
                clearable
                @on-change="selectDateRangeShouru"
                placeholder="选择起始时间"
                style="width: 300px"
              ></DatePicker>
            </Form-item>
            <Button
              @click="getReceiptRecordData"
              type="primary"
              icon="ios-search"
              class="search-btn"
              >搜索</Button
            >
          </Form>
        </Row>
        <Table
          :loading="loading"
          border
          :columns="shouruColumns"
          :data="receiptRecordData"
          class="mt_10"
          ref="table"
        >
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page
            :current="receiptRecordSearchForm.pageNumber"
            :total="receiptRecordTotal"
            :page-size="receiptRecordSearchForm.pageSize"
            @on-change="walletChangePage"
            @on-page-size-change="walletChangePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </TabPane>
      <TabPane label="支出" name="zhichu" tab="secondBox">
        <Row>
          <Form
            ref="searchForm"
            :model="shouruSearchForm"
            inline
            :label-width="70"
            class="search-form"
          >
            <Form-item label="支出类型" prop="start">
              <Select
                v-model="shouruSearchForm.start"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option value="MEETING">充值会员</Option>
                <Option value="OFFLINE">线下订单</Option>
                <Option value="NORMAL">线上订单</Option>
                <Option value="VIRTUAL">虚拟订单</Option>
              </Select>
            </Form-item>
            <Form-item label="下单时间">
              <DatePicker
                v-model="selectDate"
                type="datetimerange"
                format="yyyy-MM-dd"
                clearable
                @on-change="selectDateRangeShouru"
                placeholder="选择起始时间"
                style="width: 300px"
              ></DatePicker>
            </Form-item>
            <Button
              @click="getReceiptRecordData"
              type="primary"
              icon="ios-search"
              class="search-btn"
              >搜索</Button
            >
          </Form>
        </Row>
        <Table
          :loading="loading"
          border
          :columns="zhichuColumns"
          :data="receiptRecordData"
          class="mt_10"
          ref="table"
        >
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page
            :current="receiptRecordSearchForm.pageNumber"
            :total="receiptRecordTotal"
            :page-size="receiptRecordSearchForm.pageSize"
            @on-change="walletChangePage"
            @on-page-size-change="walletChangePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";

export default {
  name: "fuwu",
  components: {
    region,
    ossManage,
    liliMap,
  },
  props: {
    memberId: {
      type: String,
    },
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      selectDate: null, // 选择时间段
      tuiguangSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      shouruSearchForm: {}, //充值钱包收入
      shouruColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入时间",
          key: "expenditureTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入类型",
          key: "expenditureType",
          tooltip: true,
          width: "100",
          render: (h, params) => {
            if (params.row.expenditureType == "3") {
              return h("div", "充值会员");
            }
            if (params.row.expenditureType == "OFFLINE") {
              return h("div", "线下订单");
            }
            if (params.row.expenditureType == "NORMAL") {
              return h("div", "线上订单");
            }
            if (params.row.expenditureType == "VIRTUAL") {
              return h("div", "虚拟订单");
            }
          },
        },
        {
          title: "焕贝金额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
        {
          title: "分佣焕贝额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        }
      ], //充值钱包-支出
      zhichuColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出时间",
          key: "expenditureTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出类型",
          key: "expenditureType",
          tooltip: true,
          width: "100",
          render: (h, params) => {
            if (params.row.expenditureType == "3") {
              return h("div", "充值会员");
            }
            if (params.row.expenditureType == "OFFLINE") {
              return h("div", "线下订单");
            }
            if (params.row.expenditureType == "NORMAL") {
              return h("div", "线上订单");
            }
            if (params.row.expenditureType == "VIRTUAL") {
              return h("div", "虚拟订单");
            }
          },
        },
        {
          title: "收款会员名",
          key: "yiBei",
        },
        {
          title: "收款手机号",
          key: "yiBei",
        },
        {
          title: "焕贝额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
        {
          title: "手续费",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
        {
          title: "提现折扣",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "")
            );
          },
        },
        {
          title: "对应现金额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
      ], //充值钱包-支出
      choseIds: [], //选中解绑的数据
      receiptRecordData: [],
      receiptRecordTotal: 0, //发票记录总条数
      receiptRecordSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
    };
  },
  methods: {
    init() {
      //收入
      this.getOrderData();
    },
    //查询支出
    getReceiptRecordData() {
      this.loading = true;
      this.receiptRecordSearchForm.memberId = this.memberId;
      API_Order.getBranch(this.receiptRecordSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.receiptRecordData = res.result.records;
          this.receiptRecordTotal = res.result.total;
          this.getBranchByPageCount(this.receiptRecordSearchForm);
        }
      });
    },
    //支出
    walletChangePage(v) {
      this.receiptRecordSearchForm.pageNumber = v;
      this.getReceiptRecordData();
    },
    //支出
    walletChangePageSize(v) {
      this.receiptRecordSearchForm.pageNumber = 1;
      this.receiptRecordSearchForm.pageSize = v;
      this.getReceiptRecordData();
    },
    // 收入起止时间从新赋值
    //充值钱包收入时间选择
    selectDateRangeShouru(v) {
      // if (v) {
      //   this.tuiguangSearchForm.startDate = v[0];
      //   this.tuiguangSearchForm.endDate = v[1];
      // }
    },
    getOrderData() {
      this.loading = true;
      // this.tuiguangSearchForm.memberId = this.memberId;
      API_Order.getIncome(this.tuiguangSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderData = res.result.records;
          this.orderTotal = res.result.total;
        }
      });
    },
  },

  mounted() {
    // this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "../../user-partner-detail.scss";
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
